<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>相对定位与绝对定位</title>
		<style>
			/* 相对定位，box2图片压到box1图片 */
			div.box1{
				width: 700px;
				height: 400px;
				background: url(img/red.jpg);
				/* 声明一个相对定位与方向 */
				position: absolute;
				left: ;
				top: ;
				/* 堆叠 z-index: 针对所有的position定位 */
				z-index: 3;
			}
			div.box2{
				width: 700px;
				height: 400px;
				border: 1px solid saddlebrown;
				background: url(img/blue.jpg);
				position: absolute;
				left: ;
				top: ;
				z-index: 7;
			}
			
		</style>
	</head>
	<body>
		<!-- 定位：相对定位  相对于父级元素定位
		          功能：单一元素定位,元素在正常文档流中(不脱离文档流) 推荐
				  position属性：relative; 起到声明意义可以用相对定位  
				          方向属性：left,fight,top,bottom
						  堆叠顺序属性：z-index
						            属性值数值，数值越大，越靠前
									
				  
				  
				  绝对定位  按照定位祖先【页面左上角】进行定位
					功能：脱离文档流，不占据原空间
					方向属性和叠加属性和相对以及固定定位公用
					 position属性：absolute；声名文员可以使用绝对定位		
							   
				
				
				实际开发中，相对定位结合绝对定位一起使用
				           侧边栏，左栏，遮罩层【挂靠】	
				案例：左栏弹出【html结构，语义化标签+css两种定位+js】
									  
									  
		 -->
		 <div class="box1"></div>
		 <div class="box2"></div>
	</body>
</html>